<template>
  <div class="menu">
    <el-menu
      router
      :default-active="defaultActiveKey.path"
      :unique-opened="false"
      background-color="rgba(36, 36, 36, 1)"
      text-color="#fff"
      :collapse="collapse"
      :mode="mode"
      class="el-menu-vertical-demo"
    >
       <AsideMenu v-for="ite in menus" :key="ite.path" :item="ite" />
    </el-menu>
  </div>
</template>

<script setup>
import { ref, toRefs } from "vue";
import AsideMenu from "./AsideMenu.vue";
import { useFoldMenuStore } from "@/store/foldMenu";
import { storeToRefs } from "pinia";
import { useRouter, useRoute } from "vue-router";
const foldMenu = useFoldMenuStore();
const router = useRouter();
const route = useRoute();
const { collapse, menus } = storeToRefs(foldMenu);
const props = defineProps({
  mode: {
    type: String,
    default: "vertical",
  },
});
const { mode } = toRefs(props);
// 刷新默认选中菜单
const defaultActiveKey = ref(router.currentRoute.value);
defineOptions({
  name: "Menu",
});
</script>

<style lang="scss" scoped>
.menu {
  height: calc(100% - 56px);
  .el-menu {
    border-right: none;
  }
}
</style>
